{{define "content"}}


<h3 class="float-left">{{.Title}}</h3>
<form class="form-inline float-right align" method="GET">
    <input class="form-control mr-sm-2" id="keyword" name="keyword" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-success my-2 my-sm-0" type="submit">Search</button>
</form>


    {{if .EmailList}}
    <div>
    
    <table class="table table-striped table-dark table-condensed">
        <thead>
        <tr>

            <th scope="col">Sender</th>
            <th scope="col">Recipient</th>
            <th scope="col">Subject</th>
            <th scope="col">Body Preview</th>
            <th scope="col"></th>
        </tr>
        </thead>
        <tbody>

        {{range .EmailList}}
        <tr>
            <td style="width: 10%"><a href="mailto:{{.SenderEmail}}"> {{.SenderName}} </a></td>
            <td style="width: 10%"><a href="mailto:{{.ToRecipient}}"> {{.ToRecipientName}} </a></td>
            <td>{{.Subject}}</std>
            <td>
                <p> {{.BodyPreview}}</p>
            </td>
            <td><button type="button" class="btn btn-success" data-toggle="modal" data-target="#mailModal" data-id="{{.Id}}">View e-mail</button></td>
        </tr>

            {{end}}
        </tbody>
    </table>
        </div>
        {{else}}
        <br><br>
        <div class="alert alert-info show" role="alert">
            No e-mails found...
        </div>

            {{end}}



  

    <!-- Modal -->
    <div class="modal fade"   id="mailModal" tabindex="-1" role="dialog" aria-labelledby="mailModal" aria-hidden="true">
        <div class="modal-dialog modal-lg " role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="mailModalTitle">Content</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                        ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>

                </div>
            </div>
        </div>
    </div>
<script>
    $('#mailModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget);
        var id = button.data('id');
        var modal = $(this);
        $.get( "/live/user/{{.User.Mail}}/email/"+id, function( data ) {
            modal.find('.modal-body').html(data);
        });
    });
</script>
{{end}}